<div class="top-left">
  <span class="location-title">页面编辑器</span>
  <nz-breadcrumb [nzSeparator]="iconTemplate">
    <nz-breadcrumb-item>
      <a [routerLink]="['/main/page-editor']">首页</a>
    </nz-breadcrumb-item>
  </nz-breadcrumb>
  <ng-template #iconTemplate><i nz-icon nzType="caret-right" nzTheme="outline"></i></ng-template>
</div>
<div class="main-content">

  <button class="create-button" [disabled]="!isLoad" nz-button nzType="primary" nz-dropdown nzTrigger="click"
    [nzDropdownMenu]="menu"> 创建新页面</button>
  <nz-dropdown-menu #menu="nzDropdownMenu">
    <ul nz-menu style="text-align: center;">
      <li nz-menu-item (click)="create(1)">单页直播间模版</li>
      <li nz-menu-item (click)="create(2)">多页直播间模版</li>
    </ul>
  </nz-dropdown-menu>
  <nz-skeleton [nzActive]="true" [nzLoading]="!isLoad">
    <div class="page-model-box">
      <div class="page-model" *ngFor="let item of pageModelList">
        <ng-container *ngIf="item.type==1">
          <div class="top" [routerLink]="['/main/page-editor', item.id]">
            <div class="title">{{item.modelName}}</div>
            <div class="content" [style.background-image]="'url('+'/assets/images/page-model1.png'+')'">
            </div>
          </div>
          <div class="bottom">
            <input class="title" nz-input placeholder="模版名称" [(ngModel)]="item.modelName"
              (ngModelChange)="save(item)" />
            <div class="type">单页直播间模板</div>
          </div>
        </ng-container>
        <ng-container *ngIf="item.type==2">
          <div class="top" [routerLink]="['/main/page-editor', item.id]">
            <div class="title">{{item.modelName}}</div>
            <div class="content" [style.background-image]="'url('+'/assets/images/page-model2.png'+')'">
            </div>
          </div>
          <div class="bottom">
            <input class="title" nz-input placeholder="模版名称" (ngModelChange)="save(item)"
              [(ngModel)]="item.modelName" />
            <div class="type">多页直播间模板</div>
          </div>
        </ng-container>
      </div>

    </div>
  </nz-skeleton>
</div>